<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/angular.min.js"></script>
		<script type="text/javascript" src="../js/angular-route.min.js"></script>
	</head>

	<body>
		<!--ng-app="myapp"定义了一个模块,限定angular作用域-->
		<div ng-app="myapp">
			<!--路由模式,页面不同的区域异步加载-->
			<div>
				<h1>Head</h1>
				<a href="#/one">首页</a>
				<a href="#/user">用户</a>
				<a href="#/product">商品</a>
			</div>
			<!--显示不同的页面,ng-view 显示路由调用的页面-->
			<div ng-view></div>
			<div>
				<h1>Foot</h1>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		//初始化myapp模块
		var myapp = angular.module("myapp", ["ngRoute"]);
		myapp.config(["$routeProvider", function($routeProvider) {
			//设置路由对应的页面
			$routeProvider.when("/one", {
				templateUrl: "demo2_1.html"
			}).when("/user", {
				templateUrl: "demo2_2.html"
			}).when("/product", {
				templateUrl: "demo2_3.html"
			}).otherwise({
				redirectTo: "/one"
			})
		}]);
	</script>

</html>